<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>承运商主页 - 区块链物流系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind CSS自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10B981', // 绿色主色调
                        secondary: '#3B82F6', // 蓝色辅助色
                        accent: '#6366F1', // 紫色强调色
                        dark: '#1E293B', // 深色
                        light: '#F8FAFC' // 浅色
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #f8fafc;
            background-image: radial-gradient(#e2e8f0 1px, transparent 1px), radial-gradient(#e2e8f0 1px, transparent 1px);
            background-size: 50px 50px;
            background-position: 0 0, 25px 25px;
        }
        .card-shadow {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .btn-hover {
            transition: all 0.3s ease-in-out;
        }
        .btn-hover:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.6s ease-out forwards;
        }
    </style>
</head>
<body class="font-inter min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <i class="fa fa-link text-2xl text-primary mr-3"></i>
                    <h1 class="text-xl font-bold text-dark">区块链物流系统</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-gray-600">欢迎，<span id="company-name">承运商</span></span>
                    <button onclick="logout()" class="bg-red-500 text-white px-4 py-2 rounded-lg btn-hover">
                        <i class="fa fa-sign-out mr-2"></i>退出
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏和主内容 -->
    <div class="flex">
        <!-- 侧边栏 -->
        <div class="w-64 bg-white shadow-sm min-h-screen">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">承运商功能</h2>
                <ul class="space-y-2">
                    <li>
                        <button onclick="showSection('dashboard')" class="w-full text-left px-4 py-2 rounded-lg bg-primary text-white">
                            <i class="fa fa-dashboard mr-2"></i>仪表板
                        </button>
                    </li>
                    <li>
                        <button onclick="showSection('available-shipments')" class="w-full text-left px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-list-alt mr-2"></i>可接运单
                        </button>
                    </li>
                    <li>
                        <button onclick="showSection('my-shipments')" class="w-full text-left px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-truck mr-2"></i>我的运单
                        </button>
                    </li>
                    <li>
                        <button onclick="showSection('profile')" class="w-full text-left px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-building mr-2"></i>公司信息
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="flex-1 p-6">
            <!-- 仪表板 -->
            <div id="dashboard" class="section animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">承运商仪表板</h2>
                
                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center">
                            <div class="bg-green-100 p-3 rounded-lg mr-4">
                                <i class="fa fa-file-text-o text-green-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-600">总承运数</p>
                                <p class="text-2xl font-bold text-dark" id="total-shipments">0</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-3 rounded-lg mr-4">
                                <i class="fa fa-check-circle text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-600">已完成</p>
                                <p class="text-2xl font-bold text-dark" id="completed-shipments">0</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center">
                            <div class="bg-yellow-100 p-3 rounded-lg mr-4">
                                <i class="fa fa-clock-o text-yellow-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-600">运输中</p>
                                <p class="text-2xl font-bold text-dark" id="in-progress-shipments">0</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center">
                            <div class="bg-orange-100 p-3 rounded-lg mr-4">
                                <i class="fa fa-exclamation-circle text-orange-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-600">待接单</p>
                                <p class="text-2xl font-bold text-dark" id="pending-shipments">0</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近运单 -->
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <h3 class="text-lg font-semibold text-dark mb-4">最近承运运单</h3>
                    <div id="recent-shipments" class="space-y-3">
                        <p class="text-gray-500 text-center py-8">暂无承运记录</p>
                    </div>
                </div>
            </div>

            <!-- 可接运单 -->
            <div id="available-shipments" class="section hidden animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">可接运单</h2>
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold text-dark">待接单运单列表</h3>
                        <div class="flex space-x-2">
                            <button onclick="refreshAvailableShipments()" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg btn-hover">
                                <i class="fa fa-refresh mr-2"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div id="available-shipments-list" class="space-y-4">
                        <div class="border rounded-lg p-4">
                            <div class="flex justify-between items-center mb-2">
                                <div>
                                    <span class="font-medium">电子产品</span>
                                    <span class="text-sm text-gray-600 ml-2">#SH2024001</span>
                                </div>
                                <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-sm">待接单</span>
                            </div>
                            <div class="text-sm text-gray-600 mb-2">从北京到上海 | 重量: 5kg</div>
                            <div class="text-xs text-gray-500 mb-3">创建时间: 2024-01-15</div>
                            <button onclick="acceptShipment('SH2024001')" class="bg-primary text-white px-4 py-2 rounded-lg btn-hover">
                                <i class="fa fa-check mr-2"></i>接单
                            </button>
                        </div>
                        <div class="border rounded-lg p-4">
                            <div class="flex justify-between items-center mb-2">
                                <div>
                                    <span class="font-medium">服装</span>
                                    <span class="text-sm text-gray-600 ml-2">#SH2024002</span>
                                </div>
                                <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-sm">待接单</span>
                            </div>
                            <div class="text-sm text-gray-600 mb-2">从广州到深圳 | 重量: 3kg</div>
                            <div class="text-xs text-gray-500 mb-3">创建时间: 2024-01-10</div>
                            <button onclick="acceptShipment('SH2024002')" class="bg-primary text-white px-4 py-2 rounded-lg btn-hover">
                                <i class="fa fa-check mr-2"></i>接单
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 我的运单 -->
            <div id="my-shipments" class="section hidden animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">我的运单</h2>
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold text-dark">承运运单列表</h3>
                        <div class="flex space-x-2">
                            <button onclick="refreshMyShipments()" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg btn-hover">
                                <i class="fa fa-refresh mr-2"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div id="my-shipments-list" class="space-y-4">
                        <div class="border rounded-lg p-4">
                            <div class="flex justify-between items-center mb-2">
                                <div>
                                    <span class="font-medium">机械设备</span>
                                    <span class="text-sm text-gray-600 ml-2">#SH2024003</span>
                                </div>
                                <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">运输中</span>
                            </div>
                            <div class="text-sm text-gray-600 mb-2">从上海到杭州 | 重量: 10kg</div>
                            <div class="text-xs text-gray-500 mb-3">接单时间: 2024-01-12</div>
                            <div class="flex space-x-2">
                                <button onclick="updateShipmentStatus('SH2024003', 'in_transit')" class="bg-blue-500 text-white px-3 py-1 rounded btn-hover text-sm">
                                    更新状态
                                </button>
                                <button onclick="completeShipment('SH2024003')" class="bg-green-500 text-white px-3 py-1 rounded btn-hover text-sm">
                                    完成运输
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 公司信息 -->
            <div id="profile" class="section hidden animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">公司信息</h2>
                <div class="bg-white rounded-xl p-6 card-shadow max-w-md">
                    <div class="text-center mb-6">
                        <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa fa-building text-3xl text-white"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-dark" id="profile-company-name">承运商</h3>
                        <p class="text-gray-600" id="profile-id">ID: -</p>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">公司信息:</span>
                            <span class="text-dark text-right" id="profile-company-info">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">注册时间:</span>
                            <span class="text-dark" id="profile-register-time">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">总承运数:</span>
                            <span class="text-dark" id="profile-total-shipments">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态更新模态框 -->
    <div id="status-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full m-4 animate-fadeIn">
            <div class="flex justify-between items-center mb-4">
                <h3 id="modal-title" class="text-xl font-bold">更新运单状态</h3>
                <button onclick="closeStatusModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">当前状态</label>
                    <select id="status-select" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <option value="accepted">已接单</option>
                        <option value="in_transit">运输中</option>
                        <option value="delivered">已送达</option>
                        <option value="completed">已完成</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">位置信息</label>
                    <input type="text" id="location-input"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary"
                        placeholder="请输入当前位置">
                </div>
                <div class="flex space-x-2">
                    <button onclick="saveStatusUpdate()" class="flex-1 bg-primary text-white py-2 rounded-lg font-medium btn-hover">
                        保存
                    </button>
                    <button onclick="closeStatusModal()" class="flex-1 bg-gray-300 text-gray-700 py-2 rounded-lg font-medium btn-hover">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 结果提示 -->
    <div id="result-message" class="fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 hidden"></div>

    <!-- JavaScript -->
    <script>
        const API_BASE = 'http://localhost:8080';
        let currentCarrierId = null;
        let currentShipmentId = null;

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL参数获取承运商信息
            const urlParams = new URLSearchParams(window.location.search);
            currentCarrierId = urlParams.get('id');
            const role = urlParams.get('role');
            
            if (!currentCarrierId || role !== 'carrier') {
                alert('请先登录');
                window.location.href = 'index.html';
                return;
            }

            // 初始化页面
            initializePage();
        });

        // 初始化页面
        function initializePage() {
            // 显示公司名称
            document.getElementById('company-name').textContent = `承运商 ${currentCarrierId}`;
            document.getElementById('profile-company-name').textContent = `承运商 ${currentCarrierId}`;
            document.getElementById('profile-id').textContent = `ID: ${currentCarrierId}`;
            
            // 加载统计数据
            loadDashboardStats();
            
            // 默认显示仪表板
            showSection('dashboard');
        }

        // 显示消息
        function showMessage(message, isSuccess = true) {
            const messageDiv = document.getElementById('result-message');
            messageDiv.textContent = message;
            messageDiv.className = 'fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50';
            messageDiv.classList.add(isSuccess ? 'bg-green-50', 'text-green-700', 'border', 'border-green-200' : 'bg-red-50', 'text-red-700', 'border', 'border-red-200');
            messageDiv.classList.remove('hidden');

            setTimeout(() => {
                messageDiv.classList.add('hidden');
            }, 3000);
        }

        // 切换页面部分
        function showSection(sectionName) {
            // 隐藏所有部分
            document.querySelectorAll('.section').forEach(section => {
                section.classList.add('hidden');
            });
            
            // 显示选中的部分
            document.getElementById(sectionName).classList.remove('hidden');
            
            // 更新侧边栏按钮状态
            document.querySelectorAll('button').forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('text-gray-600', 'hover:bg-gray-100');
            });
            
            // 设置当前选中按钮
            const currentBtn = document.querySelector(`button[onclick="showSection('${sectionName}')"]`);
            if (currentBtn) {
                currentBtn.classList.add('bg-primary', 'text-white');
                currentBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
            }
            
            // 根据部分加载数据
            switch(sectionName) {
                case 'dashboard':
                    loadDashboardStats();
                    break;
                case 'available-shipments':
                    loadAvailableShipments();
                    break;
                case 'my-shipments':
                    loadMyShipments();
                    break;
                case 'profile':
                    loadProfile();
                    break;
            }
        }

        // 加载仪表板统计数据
        async function loadDashboardStats() {
            try {
                // 这里应该调用后端API获取统计数据
                // 暂时使用模拟数据
                document.getElementById('total-shipments').textContent = '8';
                document.getElementById('completed-shipments').textContent = '5';
                document.getElementById('in-progress-shipments').textContent = '2';
                document.getElementById('pending-shipments').textContent = '3';
                
                // 加载最近承运运单
                const recentShipmentsDiv = document.getElementById('recent-shipments');
                recentShipmentsDiv.innerHTML = `
                    <div class="border-b pb-3">
                        <div class="flex justify-between items-center">
                            <span class="font-medium">机械设备</span>
                            <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">运输中</span>
                        </div>
                        <div class="text-sm text-gray-600 mt-1">从上海到杭州</div>
                    </div>
                    <div class="border-b pb-3">
                        <div class="flex justify-between items-center">
                            <span class="font-medium">食品</span>
                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">已完成</span>
                        </div>
                        <div class="text-sm text-gray-600 mt-1">从成都到重庆</div>
                    </div>
                `;
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        // 加载可接运单
        async function loadAvailableShipments() {
            try {
                // 这里应该调用后端API获取可接运单
                // 暂时使用模拟数据
                const availableShipmentsDiv = document.getElementById('available-shipments-list');
                availableShipmentsDiv.innerHTML = `
                    <div class="border rounded-lg p-4">
                        <div class="flex justify-between items-center mb-2">
                            <div>
                                <span class="font-medium">电子产品</span>
                                <span class="text-sm text-gray-600 ml-2">#SH2024001</span>
                            </div>
                            <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-sm">待接单</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">从北京到上海 | 重量: 5kg</div>
                        <div class="text-xs text-gray-500 mb-3">创建时间: 2024-01-15</div>
                        <button onclick="acceptShipment('SH2024001')" class="bg-primary text-white px-4 py-2 rounded-lg btn-hover">
                            <i class="fa fa-check mr-2"></i>接单
                        </button>
                    </div>
                    <div class="border rounded-lg p-4">
                        <div class="flex justify-between items-center mb-2">
                            <div>
                                <span class="font-medium">服装</span>
                                <span class="text-sm text-gray-600 ml-2">#SH2024002</span>
                            </div>
                            <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-sm">待接单</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">从广州到深圳 | 重量: 3kg</div>
                        <div class="text-xs text-gray-500 mb-3">创建时间: 2024-01-10</div>
                        <button onclick="acceptShipment('SH2024002')" class="bg-primary text-white px-4 py-2 rounded-lg btn-hover">
                            <i class="fa fa-check mr-2"></i>接单
                        </button>
                    </div>
                `;
            } catch (error) {
                console.error('加载可接运单失败:', error);
                availableShipmentsDiv.innerHTML = '<p class="text-red-500 text-center py-8">加载失败，请重试</p>';
            }
        }

        // 加载我的运单
        async function loadMyShipments() {
            try {
                // 这里应该调用后端API获取承运商运单
                const myShipmentsDiv = document.getElementById('my-shipments-list');
                myShipmentsDiv.innerHTML = `
                    <div class="border rounded-lg p-4">
                        <div class="flex justify-between items-center mb-2">
                            <div>
                                <span class="font-medium">机械设备</span>
                                <span class="text-sm text-gray-600 ml-2">#SH2024003</span>
                            </div>
                            <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">运输中</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">从上海到杭州 | 重量: 10kg</div>
                        <div class="text-xs text-gray-500 mb-3">接单时间: 2024-01-12</div>
                        <div class="flex space-x-2">
                            <button onclick="updateShipmentStatus('SH2024003', 'in_transit')" class="bg-blue-500 text-white px-3 py-1 rounded btn-hover text-sm">
                                更新状态
                            </button>
                            <button onclick="completeShipment('SH2024003')" class="bg-green-500 text-white px-3 py-1 rounded btn-hover text-sm">
                                完成运输
                            </button>
                        </div>
                    </div>
                `;
            } catch (error) {
                console.error('加载我的运单失败:', error);
                myShipmentsDiv.innerHTML = '<p class="text-red-500 text-center py-8">加载失败，请重试</p>';
            }
        }

        // 加载公司信息
        function loadProfile() {
            document.getElementById('profile-company-info').textContent = '专业的物流服务提供商';
            document.getElementById('profile-register-time').textContent = '2024-01-01';
            document.getElementById('profile-total-shipments').textContent = '8';
        }

        // 刷新可接运单
        function refreshAvailableShipments() {
            loadAvailableShipments();
            showMessage('运单列表已刷新', true);
        }

        // 刷新我的运单
        function refreshMyShipments() {
            loadMyShipments();
            showMessage('运单列表已刷新', true);
        }

        // 接单操作
        function acceptShipment(shipmentId) {
            if (confirm(`确定要接单 ${shipmentId} 吗？`)) {
                // 这里应该调用后端API接单
                showMessage(`成功接单 ${shipmentId}`, true);
                setTimeout(() => {
                    loadAvailableShipments();
                    loadDashboardStats();
                }, 1000);
            }
        }

        // 更新运单状态
        function updateShipmentStatus(shipmentId, currentStatus) {
            currentShipmentId = shipmentId;
            const modal = document.getElementById('status-modal');
            const title = document.getElementById('modal-title');
            const statusSelect = document.getElementById('status-select');
            
            title.textContent = `更新运单 ${shipmentId} 状态`;
            statusSelect.value = currentStatus;
            modal.classList.remove('hidden');
        }

        // 完成运输
        function completeShipment(shipmentId) {
            if (confirm(`确定要标记运单 ${shipmentId} 为已完成吗？`)) {
                // 这里应该调用后端API完成运输
                showMessage(`运单 ${shipmentId} 已完成`, true);
                setTimeout(() => {
                    loadMyShipments();
                    loadDashboardStats();
                }, 1000);
            }
        }

        // 保存状态更新
        function saveStatusUpdate() {
            const status = document.getElementById('status-select').value;
            const location = document.getElementById('location-input').value;
            
            // 这里应该调用后端API更新状态
            showMessage(`运单 ${currentShipmentId} 状态已更新`, true);
            closeStatusModal();
            setTimeout(() => {
                loadMyShipments();
                loadDashboardStats();
            }, 1000);
        }

        // 关闭状态更新模态框
        function closeStatusModal() {
            document.getElementById('status-modal').classList.add('hidden');
            currentShipmentId = null;
            document.getElementById('location-input').value = '';
        }

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = 'index.html';
            }
        }
    </script>
</body>
</html>